<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %><%@
	include file="/WEB-INF/jspf/import.jspf" %><%--
--%><!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>车友会-筛选 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="lijun_gz none" />
<link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
</head>
<body class="g-doc" style="background: #f5f5f5">
	 <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7475" />
        </jsp:include>
<div class="body">
     <%@include file="../common/intf6007.html" %>
    <!-- 公共头部 -->
    <div class="g-hd">
        <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
        <div class="header-title">
            <span class="header-title-nav">
                <a href="${WAPROOT}/">车友会</a>&nbsp;&gt;&nbsp; 筛选
            </span>
        </div>
    </div>

    <div class="m-form">
        <form id="mainForm" name="mainForm">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th>地区：</th>
                <td>
                    <p>
                        <select name="sheng" id="sheng" class="u-txt"></select>
                    </p>
                    <p>
                        <select name="shi" id="shi" class="u-txt" style="margin-top:10px;"></select>
                    </p>
                </td>
              </tr>
              <tr>
                <th>车系：</th>
                <td>
                	<p>
                        <select name="brand" id="bid" class="u-txt">
                            <option value="0">品牌</option>
                        </select>
					</p>
					<p>
                        <select name="serial" id="sid" class="u-txt" style="margin-top:10px;">
                            <option value="0">车系（非必选）</option>
                        </select>
                        <input type="hidden" name="brandName" id="brandName" value=""/>
						<input type="hidden" name="serialName" id="serialName" value=""/>
                    </p>
                </td>
              </tr>
            </table>
        </form>
        <div class="m-btnArea">
            <a href="javascript:doSelect(0);" class="u-btnA">筛选</a>
        </div>
    </div>

    <!-- 筛选结果显示 -->
    <div class="m-cylist" style="display: none" id="D-list"><p class="m-cylist-tj" id="p-condition"></p></div>
    
    <div class="btn-more" style="display: none" id="D-more"><a id="J-more" href="javascript:doSelect(1);">点击查看更多</a></div>
    <div id="Jfoot" class="g-footer">
        <!-- 公共底部 -->
        <%@include file="../common/intf5987.html" %>
    </div>
</div>
<script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js"></script>
<script src="http://js.3conline.com/min/temp/v1/dpl-faker,dpl-related_select.js" charset="GBK"></script>
<script type="text/javascript" src="${ROOT}/template/wap/club/city.js"></script>
<script>
	var pageNo = 0;
	var pageSize = 12;
	
	// 空回调函数
	function aFunc(data) {}
	
	function doSelect(search) {
		var provinceName = $('#sheng').val();
		var cityName = $('#shi').val();
		var brandId = $('#bid').val();
		var serialId = $('#sid').val();
		
		var conditionText = '';
		if (search == 0) {
			pageNo = 0;
			conditionText += provinceName ? (provinceName + ' ') : '全国 ';
			conditionText += cityName ? (cityName + ' ') : ' ';

			if (brandId != 0) {
				var sel = document.getElementById("bid");
				var brandName = sel.options[sel.selectedIndex].text;
				conditionText += (brandName.substr(2, brandName.length-2) + ' ');
			}
			
			if (serialId != 0) {
				var sel = document.getElementById("sid");
				var serialName = sel.options[sel.selectedIndex].text;
				conditionText += serialName;
			}
			
			$('#p-condition').html("条件：" + conditionText);
			$('#D-list').css('display', 'block');
		}
		
		// zepto不能像jQuery一样传data参数，所以拼接url
		var url = "${ROOT}/wap/club/doSelect.do?req_enc=utf-8&resp_enc=utf-8&pageNo=" + pageNo
				+ "&pageSize=" + pageSize
				+ "&provinceName=" + provinceName
				+ "&cityName=" + cityName
				+ "&brandId=" + brandId
				+ "&serialId=" + serialId 
				+ "&_t=" + new Date().getTime();
		
		$.ajax({
			type: 'POST',
			url: url,
			dataType: 'jsonp',
			jsonpCallback:'aFunc',
			success: function(data) {
				var list = data.list;
				if (list.length >= 1) {
					var $html = '';
					for (var i in list) {
						$html += '<a class="m-cylist-item" href="${WAPROOT}/'+(list[i].clubUrl ? list[i].clubUrl : list[i].clubId)+'/">'
							+ '<div class="m-cylist-pictext">'
							+ '<img width="75" height="75" src="'+(list[i].logo ? list[i].logo : 'http://www1.pcauto.com.cn/wap/g20140509/cyh/img/holder_270x200.jpg')+'"/>'
							+ '<div class="m-cylist-text"><p>'+list[i].name+'</p>'
							+ '<i class="star"><em style="width:'+list[i].levelId*20+'%"></em></i>'
							+ '<span><i>会员：'+list[i].memberNum+'人</i>'
							+ '<i>油值：'+list[i].totalPetrol+'L</i></span>'
							+ '<span><i>地区：'+((list[i].provinceName.indexOf("北京")>-1 || list[i].provinceName.indexOf("上海")>-1 ||list[i].provinceName.indexOf("天津")>-1 || list[i].provinceName.indexOf("重庆")>-1)?list[i].provinceName:(list[i].cityName=="")?(list[i].provinceName==""?"--":list[i].provinceName):list[i].cityName)+'</i>'
							+ '<i>车系：'+(list[i].seriesName ? list[i].seriesName : list[i].brandName ? list[i].brandName : '--')+'</i></span></div>'
							+ '</div></a>';
					}

					if (search == 1) {
						$('#D-list').append($html);
					} else {
						$('#D-list').html(document.getElementById('p-condition').outerHTML + $html);
					}
					
					if (list.length < pageSize) {
						$('#D-more').css('display', 'none');
					} else {
						pageNo++;
						$('#D-more').css('display', 'block');
					}
				} else {
					if (search == 0) {
						$('#D-list').html(document.getElementById('p-condition').outerHTML + '<div class="m-none"><span>  >_< lll</span><p>抱歉，暂无符合条件的车友会~</p></div>');
					}
					$('#D-more').css('display', 'none');
				}
				setHeight();
			}
		});
	}
	
	/*满屏功能*/
    function setHeight(){
         var Jfoot = document.querySelector(".g-footer");
        var Jbody = document.querySelector(".body");
        if (!Jfoot) return;
        if (!Jbody) return;
        var webHeight = document.documentElement.clientHeight,
            JbodyHeight = Jbody.clientHeight;
        if (JbodyHeight < webHeight) {
            Jbody.style.height = webHeight + "px";
            Jbody.style.position = "relative";
            Jfoot.setAttribute("style", "width:100%;position:absolute;bottom:0px;");
        }else{
            Jfoot.style.position = "relative";
        }
    }
</script>
</body>
</html>